<style>

    .nav-link {
        color: var(--dark);
        font-weight: 500;
        margin: 0 5px;
        transition: var(--transition);
    }

    .nav-link:hover, .nav-link.active {
        color: var(--primary);
    }

    .search-container {
        padding: 2rem 0;
    }

    /* 搜索区域 */
    .search-container .search-header {
        background-color: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: var(--shadow);
        margin-bottom: 2rem;
    }

    .search-container .search-input-group {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
    }

    .search-container .search-input {
        width: 100%;
        padding: 1rem 1.5rem 1rem 4rem;
        border: 1px solid var(--light-gray);
        border-radius: 8px;
        font-size: 1.1rem;
        transition: var(--transition);
    }

    .search-container .search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

    .search-container .search-icon {
        position: absolute;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray);
    }

    .search-container .search-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.5rem;
        justify-content: center;
    }

    .search-container .filter-chip {
        background-color: var(--light);
        border: 1px solid var(--light-gray);
        border-radius: 20px;
        padding: 6px 16px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .search-container .filter-chip:hover, .search-container .filter-chip.active {
        background-color: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* 搜索结果统计 */
    .search-stats {
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .search-stats .result-count {
        color: var(--gray);
        font-size: 0.95rem;
    }

    .search-stats .sort-options {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .search-stats .sort-label {
        color: var(--gray);
        font-size: 0.95rem;
    }

    .search-stats .sort-select {
        border: 1px solid var(--light-gray);
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 0.9rem;
    }

    /* 内容类型标签页 */
    .content-tabs {
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 2rem;
        box-shadow: var(--shadow);
    }

    .content-tabs .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 1rem;
    }

    .content-tabs .nav-link {
        color: var(--gray);
        border: none;
        padding: 1rem 1.5rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .content-tabs .nav-link.active {
        color: var(--primary);
        border-bottom: 3px solid var(--primary);
        background-color: transparent;
    }

    /* 搜索结果卡片 */
    .results-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .results-container .result-card {
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
    }

    .results-container .result-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .results-container .result-card-body {
        padding: 1.5rem;
    }

    .results-container .result-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
        align-items: flex-start;
    }

    .results-container .result-type {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 3px 10px;
        border-radius: 4px;
        font-weight: 600;
    }

    .results-container .type-article {
        background-color: rgba(67, 97, 238, 0.1);
        color: var(--primary);
    }

    .results-container .type-album {
        background-color: rgba(72, 149, 239, 0.1);
        color: var(--accent);
    }

    .results-container .type-post {
        background-color: rgba(56, 176, 0, 0.1);
        color: var(--success);
    }

    .results-container .type-service {
        background-color: rgba(255, 183, 3, 0.1);
        color: var(--warning);
    }

    .results-container .type-job {
        background-color: rgba(230, 57, 70, 0.1);
        color: var(--danger);
    }

    .results-container .type-resume {
        background-color: rgba(114, 9, 183, 0.1);
        color: var(--primary-light);
    }

    .results-container .result-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        color: var(--gray);
    }

    .results-container .result-meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .results-container .result-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: var(--dark);
        transition: var(--transition);
    }

    .results-container .result-title:hover {
        color: var(--primary);
    }

    .results-container .result-excerpt {
        color: var(--gray);
        margin-bottom: 1rem;
        line-height: 1.6;
    }

    .results-container .highlight {
        background-color: rgba(255, 255, 0, 0.3);
        padding: 0 3px;
    }

    /* 特定类型结果样式 */
    .article-result .article-result .result-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid var(--light-gray);
    }

    .article-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.9rem;
        color: var(--gray);
    }

    .album-result .album-photos {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .album-result .album-photos img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
    }

    .post-result {
        display: flex;
    }

    .post-result .post-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .post-result .post-content {
        flex: 1;
    }

    .post-result .post-author {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .service-result .service-details {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--light-gray);
    }

    .service-result .service-price {
        font-weight: 600;
        color: var(--primary);
    }

    .service-result .service-rating {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--warning);
    }

    .job-result .job-details {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
    }

    .job-result .job-detail {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.9rem;
        color: var(--gray);
    }

    .resume-result .resume-details {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
    }

    .resume-result .resume-detail {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.9rem;
        color: var(--gray);
    }

    /* 分页 */
    .pagination-container {
        margin-top: 3rem;
        display: flex;
        justify-content: center;
    }

    .pagination {
        display: flex;
        gap: 5px;
    }

    .page-item .page-link {
        color: var(--primary);
        border: 1px solid var(--light-gray);
        border-radius: 6px;
        padding: 8px 16px;
        transition: var(--transition);
    }

    .page-item.active .page-link {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .page-item .page-link:hover {
        background-color: rgba(67, 97, 238, 0.1);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .search-header {
            padding: 1rem;
        }

        .search-input {
            font-size: 1rem;
            padding: 0.75rem 1rem 0.75rem 3.5rem;
        }

        .result-card-body {
            padding: 1rem;
        }

        .result-title {
            font-size: 1.1rem;
        }

        .album-photos img {
            width: 60px;
            height: 60px;
        }

        .post-result {
            flex-direction: column;
        }

        .post-avatar {
            margin-right: 0;
            margin-bottom: 1rem;
        }
    }

</style>


<!-- 主要内容 -->
<div class="container search-container">
    <!-- 搜索区域 -->
    <div class="search-header">
        <div class="search-input-group">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索文章、相册、动态、服务、招聘或求职..." value="音乐">
        </div>

        <div class="search-filters">
            <div class="filter-chip active">
                <i class="fas fa-clock"></i> 最新
            </div>
            <div class="filter-chip">
                <i class="fas fa-eye"></i> 最多浏览
            </div>
            <div class="filter-chip">
                <i class="fas fa-heart"></i> 最多点赞
            </div>
            <div class="filter-chip">
                <i class="fas fa-comment"></i> 最多评论
            </div>
            <div class="filter-chip">
                <i class="fas fa-map-marker-alt"></i> 同城
            </div>
        </div>
    </div>

    <!-- 搜索结果统计 -->
    <div class="search-stats">
        <div class="result-count">找到约 <strong>128</strong> 个与 "音乐" 相关的结果</div>

        <div class="sort-options">
            <span class="sort-label">排序方式:</span>
            <select class="sort-select">
                <option value="relevance">相关度优先</option>
                <option value="newest" selected>最新发布</option>
                <option value="popular">最受欢迎</option>
            </select>
        </div>
    </div>

    <!-- 内容类型标签页 -->
    <div class="content-tabs">
        <ul class="nav nav-tabs" id="contentTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button"
                        role="tab">
                    <i class="fas fa-th"></i> 全部
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="articles-tab" data-bs-toggle="tab" data-bs-target="#articles" type="button"
                        role="tab">
                    <i class="fas fa-newspaper"></i> 文章 (32)
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="albums-tab" data-bs-toggle="tab" data-bs-target="#albums" type="button"
                        role="tab">
                    <i class="fas fa-images"></i> 相册 (18)
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="posts-tab" data-bs-toggle="tab" data-bs-target="#posts" type="button"
                        role="tab">
                    <i class="fas fa-comment"></i> 动态 (45)
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="services-tab" data-bs-toggle="tab" data-bs-target="#services" type="button"
                        role="tab">
                    <i class="fas fa-handshake"></i> 服务 (12)
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button"
                        role="tab">
                    <i class="fas fa-briefcase"></i> 招聘 (8)
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="resumes-tab" data-bs-toggle="tab" data-bs-target="#resumes" type="button"
                        role="tab">
                    <i class="fas fa-file-alt"></i> 求职 (13)
                </button>
            </li>
        </ul>
    </div>

    <!-- 搜索结果内容 -->
    <div class="tab-content" id="contentTabsContent">
        <!-- 全部结果标签页 -->
        <div class="tab-pane fade show active" id="all" role="tabpanel">
            <div class="results-container">
                <!-- 文章结果 -->
                <div class="result-card article-result">
                    <div class="result-card-body">
                        <div class="result-header">
                            <span class="result-type type-article">文章</span>
                        </div>

                        <div class="result-meta">
                            <div class="result-meta-item">
                                <i class="fas fa-user"></i>
                                <span>音乐爱好者社区</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>2023-06-15</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-eye"></i>
                                <span>1,243 阅读</span>
                            </div>
                        </div>

                        <h3 class="result-title">
                            <a href="#">独立<span class="highlight">音乐</span>制作的入门指南：从设备到发布</a>
                        </h3>

                        <p class="result-excerpt">
                            本文详细介绍了独立<span class="highlight">音乐</span>制作的全过程，包括所需设备选择、录音技巧、后期制作以及如何在各大平台发布作品。对于想要入门<span
                                    class="highlight">音乐</span>制作的新手来说，这是一份全面的参考资料...
                        </p>

                        <div class="result-footer">
                            <div class="article-meta">
                                <div>
                                    <i class="fas fa-tag"></i>
                                    <span>音乐制作, 独立音乐, 教程</span>
                                </div>
                            </div>
                            <div class="article-actions">
                                <span class="me-3"><i class="far fa-heart"></i> 128</span>
                                <span><i class="far fa-comment"></i> 36</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 相册结果 -->
                <div class="result-card album-result">
                    <div class="result-card-body">
                        <div class="result-header">
                            <span class="result-type type-album">相册</span>
                        </div>

                        <div class="result-meta">
                            <div class="result-meta-item">
                                <i class="fas fa-user"></i>
                                <span>王摄影师</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>2023-06-10</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-eye"></i>
                                <span>876 浏览</span>
                            </div>
                        </div>

                        <h3 class="result-title">
                            <a href="#">2023北京国际<span class="highlight">音乐</span>节现场纪实</a>
                        </h3>

                        <p class="result-excerpt">
                            记录了2023北京国际<span class="highlight">音乐</span>节的精彩瞬间，包括舞台表演、后台花絮和观众互动等内容。本次<span
                                    class="highlight">音乐</span>节汇集了来自15个国家的30多支乐队...
                        </p>

                        <div class="album-photos">
                            <img src="https://picsum.photos/id/1035/200/200" alt="音乐节照片1">
                            <img src="https://picsum.photos/id/1039/200/200" alt="音乐节照片2">
                            <img src="https://picsum.photos/id/1059/200/200" alt="音乐节照片3">
                            <img src="https://picsum.photos/id/1073/200/200" alt="音乐节照片4">
                            <div class="d-flex align-items-center justify-content-center bg-light-gray text-gray"
                                 style="width: 80px; height: 80px; border-radius: 6px;">
                                +12
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 动态结果 -->
                <div class="result-card post-result">
                    <div class="result-card-body">
                        <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="post-avatar">

                        <div class="post-content">
                            <div class="result-header">
                                <span class="result-type type-post">动态</span>
                            </div>

                            <div class="post-author">李明</div>

                            <div class="result-meta">
                                <div class="result-meta-item">
                                    <i class="fas fa-calendar"></i>
                                    <span>今天 14:30</span>
                                </div>
                            </div>

                            <p class="result-excerpt">
                                刚刚入手了一套新的<span class="highlight">音乐</span>制作设备，试录了一段小样，感觉音质提升明显！分享给大家听听看，欢迎提出宝贵意见... <a
                                        href="#" class="text-primary">查看全文</a>
                            </p>

                            <div class="message-actions">
                                    <span class="message-action me-4">
                                        <i class="far fa-heart"></i> 24
                                    </span>
                                <span class="message-action me-4">
                                        <i class="far fa-comment"></i> 8
                                    </span>
                                <span class="message-action">
                                        <i class="far fa-share-square"></i> 分享
                                    </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 服务结果 -->
                <div class="result-card service-result">
                    <div class="result-card-body">
                        <div class="result-header">
                            <span class="result-type type-service">服务</span>
                        </div>

                        <div class="result-meta">
                            <div class="result-meta-item">
                                <i class="fas fa-user"></i>
                                <span>声波工作室</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>北京市朝阳区</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>更新于 2023-06-05</span>
                            </div>
                        </div>

                        <h3 class="result-title">
                            <a href="#">专业<span class="highlight">音乐</span>录制与混音服务</a>
                        </h3>

                        <p class="result-excerpt">
                            提供专业<span
                                    class="highlight">音乐</span>录制、混音和母带处理服务，拥有顶级录音设备和经验丰富的工程师。无论您是独立音乐人还是乐队，我们都能满足您的<span
                                    class="highlight">音乐</span>制作需求...
                        </p>

                        <div class="service-details">
                            <div class="service-price">¥300/小时起</div>
                            <div class="service-rating">
                                <i class="fas fa-star"></i>
                                <span>4.9 (126条评价)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 招聘结果 -->
                <div class="result-card job-result">
                    <div class="result-card-body">
                        <div class="result-header">
                            <span class="result-type type-job">招聘</span>
                        </div>

                        <div class="result-meta">
                            <div class="result-meta-item">
                                <i class="fas fa-building"></i>
                                <span>星途唱片公司</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>上海市静安区</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>发布于 2023-06-01</span>
                            </div>
                        </div>

                        <h3 class="result-title">
                            <a href="#">资深<span class="highlight">音乐</span>制作人招聘</a>
                        </h3>

                        <p class="result-excerpt">
                            我们正在寻找一位有经验的<span class="highlight">音乐</span>制作人加入团队，负责艺人专辑制作、歌曲创作和制作统筹。要求有5年以上<span
                                    class="highlight">音乐</span>制作经验，熟悉各种风格的<span class="highlight">音乐</span>制作流程...
                        </p>

                        <div class="job-details">
                            <div class="job-detail">
                                <i class="fas fa-money-bill-wave"></i>
                                <span>15K-25K/月</span>
                            </div>
                            <div class="job-detail">
                                <i class="fas fa-briefcase"></i>
                                <span>全职</span>
                            </div>
                            <div class="job-detail">
                                <i class="fas fa-graduation-cap"></i>
                                <span>本科及以上</span>
                            </div>
                            <div class="job-detail">
                                <i class="fas fa-clock"></i>
                                <span>5年以上经验</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 求职结果 -->
                <div class="result-card resume-result">
                    <div class="result-card-body">
                        <div class="result-header">
                            <span class="result-type type-resume">求职</span>
                        </div>

                        <div class="result-meta">
                            <div class="result-meta-item">
                                <i class="fas fa-user"></i>
                                <span>张音乐</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>广州市天河区</span>
                            </div>
                            <div class="result-meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>更新于 2023-05-28</span>
                            </div>
                        </div>

                        <h3 class="result-title">
                            <a href="#">寻求<span class="highlight">音乐</span>教师或<span
                                        class="highlight">音乐</span>制作相关工作</a>
                        </h3>

                        <p class="result-excerpt">
                            音乐学院毕业，主修作曲与作曲技术理论，有3年<span class="highlight">音乐</span>教学经验和2年<span
                                    class="highlight">音乐</span>制作经验。擅长钢琴、吉他教学和流行<span class="highlight">音乐</span>编曲制作，寻求相关工作机会...
                        </p>

                        <div class="resume-details">
                            <div class="resume-detail">
                                <i class="fas fa-graduation-cap"></i>
                                <span>硕士学历</span>
                            </div>
                            <div class="resume-detail">
                                <i class="fas fa-briefcase"></i>
                                <span>5年工作经验</span>
                            </div>
                            <div class="resume-detail">
                                <i class="fas fa-money-bill-wave"></i>
                                <span>期望薪资: 8K-15K</span>
                            </div>
                            <div class="resume-detail">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>可接受出差</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- 其他标签页内容结构类似，省略 -->
        <div class="tab-pane fade" id="articles" role="tabpanel">
            <div class="results-container">
                <!-- 文章结果内容 -->
            </div>
        </div>

        <div class="tab-pane fade" id="albums" role="tabpanel">
            <div class="results-container">
                <!-- 相册结果内容 -->
            </div>
        </div>

        <div class="tab-pane fade" id="posts" role="tabpanel">
            <div class="results-container">
                <!-- 动态结果内容 -->
            </div>
        </div>

        <div class="tab-pane fade" id="services" role="tabpanel">
            <div class="results-container">
                <!-- 服务结果内容 -->
            </div>
        </div>

        <div class="tab-pane fade" id="jobs" role="tabpanel">
            <div class="results-container">
                <!-- 招聘结果内容 -->
            </div>
        </div>

        <div class="tab-pane fade" id="resumes" role="tabpanel">
            <div class="results-container">
                <!-- 求职结果内容 -->
            </div>
        </div>
    </div>
</div>

<script>
	// 筛选标签交互
	document.querySelectorAll('.filter-chip').forEach(chip => {
		chip.addEventListener('click', function () {
			// 移除所有活跃状态
			document.querySelectorAll('.filter-chip').forEach(c => {
				c.classList.remove('active');
			});
			// 设置当前为活跃状态
			this.classList.add('active');
		});
	});

	// 点赞功能
	document.querySelectorAll('.message-action').forEach(action => {
		if (action.querySelector('.far.fa-heart')) {
			action.addEventListener('click', function () {
				const icon = this.querySelector('i');
				icon.classList.toggle('far');
				icon.classList.toggle('fas');
				icon.classList.toggle('text-danger');

				// 更新点赞数量
				let countText = this.textContent.trim();
				let count = parseInt(countText.split(' ')[1]);

				if (icon.classList.contains('fas')) {
					count++;
				} else {
					count--;
				}

				this.innerHTML = icon.outerHTML + ' ' + count;
			});
		}
	});

	// 搜索输入框聚焦效果
	const searchInput = document.querySelector('.search-input');
	searchInput.addEventListener('focus', function () {
		this.parentElement.classList.add('focused');
	});

	searchInput.addEventListener('blur', function () {
		this.parentElement.classList.remove('focused');
	});
</script>

    
